import React, {Children} from 'react';
import type {FC, PropsWithChildren, ElementType} from 'react';
import { DraggableComponent } from '@bastet/widgets';
import type { IDraggableComponentProps } from '@bastet/widgets';
export { default as settings } from './setting';

const ViewComponent: FC<PropsWithChildren<IDraggableComponentProps>> = (
  { style, children, ...props }
) => {
  const [ Child1 , Child2 ] = children as ElementType[] || []
  console.log('Drag: => ', { style, children, ...props })

  return (
    <DraggableComponent style={{ ...style, display: 'flex'}} {...props}>
      <div><div> name: </div><div>{ Child1 && <Child1>Child01</Child1> }</div></div>
      <div><div> age: </div><div>{ Child2 && <Child2/> }</div></div>
    </DraggableComponent>
  )
};

export default ViewComponent
